import React, { memo, useCallback, useRef } from 'react'
import { useMemo, useState } from 'react'


const HelloWorld = memo(function(props) {
  console.log("HelloWorld被渲染~")
  const { aboutInfo } = props
  console.log("HelloWorld_aboutInfo",aboutInfo);
  return <h2>Hello World {aboutInfo.current.name}</h2>
})


function calcNumTotal(num) {
  // console.log("calcNumTotal的计算过程被调用~")
  let total = 0
  for (let i = 1; i <= num; i++) {
    total += i
  }
  return total
}

const About = memo(() => {
  const [count, setCount] = useState(0)

  // const result = calcNumTotal(50)

  // 1.不依赖任何的值, 进行计算
  const result = useMemo(() => {
    return calcNumTotal(50)
  }, [])

  // 2.依赖count
  // const result = useMemo(() => {
  //   return calcNumTotal(count*2)
  // }, [count])

  // 3.useMemo和useCallback的对比
  function fn() {}
  // const increment = useCallback(fn, [])
  // const increment2 = useMemo(() => fn, [])


  // 4.使用useMemo对子组件渲染进行优化
  // const info = { name: "why", age: 18 }
  const info = useMemo(() => ({name: "why", age: 18}), [])

  // 5 使用 useRef 对参数进行 封装
  const aboutInfo = useRef({name:'ys',age:20})
  // const aboutInfo  = {name:'ys',age:20}
  console.log("aboutInfo",aboutInfo,"count",count);
  let istrue =  false
  let infos = aboutInfo
  function onClickInfo(){
    setCount(count+1)
    istrue = true 
    // aboutInfo.name ='yyds'
    // 这样修改  aboutInfo 信息 他不会告诉 子组件 我传的 aboutInfo 被改变了
    // 子组件 检测不到 aboutInfo 的改变就不会重新渲染
    // aboutInfo.current.name = 'yyds'
    // console.log("aboutInfo",aboutInfo);
    if(!istrue){
 
    }else{
      console.log("1234",infos);
      console.log(infos === aboutInfo );
    }
  }

 


  return (
    <div>
      <h2>计算结果: {result}</h2>
      <h2>计数器: {count}</h2>
      <button onClick={onClickInfo}>+1</button>

      <HelloWorld result={result} info={info} aboutInfo={aboutInfo}/>
    </div>
  )
})

export default About